<template>
  <div
      class="window move flex-col"
      ref="move"
      :class="{fullscreen}"
      :style="windowStyle"
      v-show="!window.minimize"
      @click="handleWindowClick">
    <div class="head move-area flex-row justify-between items-center"  :class="{'custom-head': window.custom}"
         @dblclick="handleFullScreen">
      <template v-if="!window.custom">
        <div class="info flex-row items-center">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#${window.icon}`"></use>
          </svg>
          <span class="title">{{ window.title }}</span>
        </div>
        <div class="btns flex-row">
          <i class="iconfont icon-zuixiaohua" @click.stop="handleMinimize" @dblclick.stop/>
          <i v-if="!fullscreen" class="iconfont icon-zuidahua" @click="handleFullScreen"/>
          <i v-else class="iconfont icon-zuidahua1" @click="handleFullScreen"/>
          <i class="iconfont icon-guanbi" @click.stop="handleClose"/>
        </div>
      </template>
    </div>

    <div class="body flex-1 " :style="bodyStyle">
      <component @hook:mounted="handleMounted" ref="app" :windowMethods="windowMethods" v-if="window.is" :is="window.is"/>
    </div>
  </div>
</template>

<script>
import {processMoveAttribute} from "@/utils/domUtils"

const Computer = () => import(/* webpackChunkName: "Computer" */"@/layouts/window/computer/Computer")
const QQMusic = () => import(/* webpackChunkName: "QQMusic" */"@/layouts/window/qqMusic/QQMusic")
const Task = () => import(/* webpackChunkName: "Task" */"@/layouts/window/task/Task")
const Todo = () => import(/* webpackChunkName: "Todo" */"@/layouts/window/todo/Todo")
const Config = () => import(/* webpackChunkName: "Config" */"@/layouts/window/config/Config")
const Picture = () => import(/* webpackChunkName: "Picture" */"@/layouts/window/picture/Picture")
const TextEditor = () => import(/* webpackChunkName: "TextEditor" */"@/layouts/window/textEditor/TextEditor")
const AudioPlayer = () => import(/* webpackChunkName: "Audio" */"@/layouts/window/audio/AudioPlayer")

export default {
  name: "Window",
  components: {Computer, QQMusic, Task, Todo, Config, Picture, TextEditor, AudioPlayer},
  props: {
    window: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    fullscreen: false,
    taskQueue: [],
  }),
  computed: {
    windowStyle() {
      return {
        zIndex: this.window.zIndex,
        left: this.window.client.x + "px",
        top: this.window.client.y + "px",
        width: this.window.client.w + "px",
        height: this.window.client.h + "px",
        border: this.window.custom ? "" : "1px solid #909399"
      }
    },
    bodyStyle() {
      return {
        backgroundColor: this.window.custom ? "" : "#fff"
      }
    },
    windowMethods() {
      return {
        handleFullScreen: this.handleFullScreen.bind(this),
        handleWindowClick: this.handleWindowClick.bind(this),
        handleMinimize: this.handleMinimize.bind(this),
        handleClose: this.handleClose.bind(this),
      }
    },
  },
  mounted() {
    processMoveAttribute(true, this, this.$refs.move)
    this.processConnect()
  },
  methods: {
    // 全屏
    handleFullScreen() {
      this.fullscreen = !this.fullscreen
    },
    // 激活
    handleWindowClick() {
      this.$store.commit("setWindowZIndex", this.window.id)
    },
    // 最小化
    handleMinimize() {
      this.$store.commit("setWindowMinimize", {
        id: this.window.id,
        flag: true
      })
    },
    // 关闭
    handleClose() {
      let client = {
        x: this.$refs.move.offsetLeft,
        y: this.$refs.move.offsetTop
      }
      this.$store.dispatch("closeApp", {window: this.window, client})

    },
    // 链接vm与WindowList
    processConnect() {
      console.log("connecting", this.window.id)
      this.$store.dispatch("connectWindowAndVm", {vm: this, windowID: this.window.id})
    },
    //eslint-disable-next-line no-unused-vars
    onReceiveMsg(from, data) {
      if(data && data.type==="window"){
        this.processWindowMsg(data)
      }else{
        if(this.$refs.app){
          this.$refs.app.onReceiveMsg  && this.$refs.app.onReceiveMsg(from, data)
        }else{
          this.taskQueue.push({from, data})
        }
      }
    },
    handleMounted() {
      while (this.taskQueue.length){
        let i = this.taskQueue.pop()
        this.$refs.app.onReceiveMsg  && this.$refs.app.onReceiveMsg(i.from, i.data)
      }
    },
    processWindowMsg(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.window {
  position: fixed;
  left: 100px;
  top: 50px;
  width: 500px;
  height: 400px;
}

.head {
  padding-left: $pn;
  color: white;
  background-color: blueviolet;
  height: 30px;
  user-select: none;
  cursor: move;

  .info {
    svg {
      font-size: $fz-n;
      padding-right: $pn;
    }
  }

  .btns {
    i {
      padding: $ms;

      &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.8);
      }
    }
  }
}

.custom-head {
  background-color: transparent;
  margin-bottom: -30px;
  z-index: 2;
}

.fullscreen {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.body {
  overflow: auto;
  //background-color: white;
}
</style>
